<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card">
          <div slot="header">
            <h2>欢迎使用智能语音助手</h2>
          </div>
          <div class="card-content">
            <p>基于MCP（多智能体协作协议）技术，为您提供更智能的语音交互体验</p>
            <el-button type="primary" @click="goToVoiceAssistant">开始体验</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <h3>语音唤醒</h3>
          </div>
          <div class="feature-content">
            <p>只需说出"小智"即可唤醒语音助手，无需按键即可交互</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <h3>智能查询</h3>
          </div>
          <div class="feature-content">
            <p>查询单位火警次数、维保情况等业务数据，响应迅速准确</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <h3>多智能体协作</h3>
          </div>
          <div class="feature-content">
            <p>采用MCP技术，多个AI智能体协同工作，提供更全面的服务</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    goToVoiceAssistant() {
      this.$router.push('/voice-assistant');
    }
  }
};
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-card {
  text-align: center;
  margin-bottom: 20px;
}

.card-content {
  padding: 20px 0;
}

.feature-content {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

h2, h3 {
  margin: 0;
  color: #303133;
}

p {
  color: #606266;
  margin-bottom: 20px;
}
</style> 